<template>
  <section class="myOrder">
    <goback :getName='goName' :getURL ="goType" :getBtn='goBtn'></goback>
    <section class="_cnt">
      <section v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" infinite-scroll-immediate-check="loading">
        <dl class="_list">
          <dd v-for="(orderList,index) of orderList" :key="index">
            <section class="id_type">
              <section>
                <!-- <p>
                  <span>
                    快递单号：
                  </span>
                  <a>
                    暂无
                  </a>
                </p> -->
                <p>
                  <span>
                    订单号：
                  </span>
                  {{orderList.orderCode}}
                </p>
              </section>
              <!-- <span class="_type">
                {{orderList.infos[0].type | changeType}}
              </span> -->
            </section>
            <section class="orderDetails" v-if="orderList.infos.length<2">
              <section class="_img"><img :src='orderList.infos[0].thumbnail' alt=""></section>
              <section class="detailsTxt">
                <p class="_title">
                  {{orderList.infos[0].productName}}
                </p>
              </section>            
            </section>
            <section class="orderDetails2 " v-if="orderList.infos.length>1">
              <section class="_img _img2" v-for="(giftImg,index) in orderList.infos" :key="index">
              <img :src='giftImg.thumbnail' alt="">
              </section>
            </section>
            <section class="_bottom">
              <p class="gift_num">
                共:{{orderList.sumNum}} 件商品
              </p>
              <p class="sumPrice">
                总价: {{orderList.sumPrice / 100}}
              </p>
              <section class="order-detail" @click="orderDetail(orderList.orderCode)">订单详情</section>
            </section>
          </dd>
        </dl>
        <loadmore v-show="loadingDom"></loadmore>
      </section>
    </section>
  </section>
</template>
<script>
  import goback from '../../components/goback'
  import loadmore from '../../components/loadmore'
  import { userInfoGet } from '../../libs/publicMethod.js'
  import { getOrderInfo } from '../../libs/interface'
  export default {
    components:{ goback, loadmore, getOrderInfo } ,
    data () {
      return {
        loading: false, // 下拉参数
        loadingDom: false,
        goName: '我的订单',
        goType: '',
        goBtn: '',
        totalNum: [],
        totalPrice: [],
        offset: 0,
        orderList: []
      }
    },
    mounted(){
      document.body.style.paddingBottom = 0
      let vm = this
      let params = {
        memberId: userInfoGet().id,
        state: -1,
        offset: 0,
        limit: 10,
      }
      getOrderInfo(params, (data) => {
        if (data.code === 1) {
          console.log(data)
          vm.orderList = data.payload
        } else {
          vm.$toast('获取订单失败')
        }
      })
    },
    methods:{
      // 订单详情页
      orderDetail(id) {
        this.$router.push('/orderDetail/'+id)
      },
      // 上拉加载更多
      loadMore () {
        let vm = this
        vm.loading = true
        vm.loadingDom = true
        vm.offset = 10 + vm.offset
        let params = {
          memberId: userInfoGet().id,
          state: -1,
          offset: vm.offset,
          limit: 10,
        }
        getOrderInfo(params, (data) => {
          if (data.code === 1 && data.payload.length > 0) {
            console.log(data)
            vm.$nextTick(() => {
              data.payload.forEach((item) => {
                vm.orderList.push(item)
              })
            })
            vm.loading = false
          } else {
            vm.loading = true
            vm.offset -= 10
            vm.$toast('暂未请求到数据,请稍后再试')
          }
          vm.loadingDom = false
        })
      },
    },
    filters:{
      changeType(val){
        switch(val){
          case 0:
            return '未付款';
          default:
            return '已付款';
        }
      }
    }
  }
</script>
<style scoped>
a{
  color: #333;
}
/* 列表 */
._cnt{
  margin-top: .5rem;
}
._list dd{
  padding: .5rem;
  background-color: white;
  margin-bottom: .5rem;
}
/* 列表头部 */
.id_type{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  font-size: .9rem;
}
.id_type p{
  margin-bottom: .2rem;
}
.id_type span{
  color: #999;
}
.id_type ._type{
  color: #E93B3D;
}
/* 列表中部 */
.orderDetails{  
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: left; 
  flex-wrap:wrap-reverse; 
  margin-top: .5rem;
  background: #eee;
  width: 100%;
  overflow-x: auto;
}
.orderDetails2{
  overflow: auto;
  white-space: nowrap;
}
.orderDetails ._img,.orderDetails2 ._img{
  width: 7rem;
  height: 5rem;
  border-radius: .6rem;
  overflow: hidden;
}
.orderDetails ._img img,.orderDetails2 ._img img{
  width: 100%;
  height: 100%;
  vertical-align: bottom;
}
.orderDetails2 ._img2{
  display: inline-block;
  margin-left: .5rem;
}
.detailsTxt{
  width: 60%;
  margin-left: 5%;
  font-size: 0.8rem;
  text-align: left;
}
.detailsTxt ._title{
  margin-top: .5rem;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detailsTxt ._num{
  margin-top: .5rem;
  color: #989898;
}
.order-detail{
  margin: auto 0;
  width:4.5rem;
  height:1.6rem;
  line-height: 1.6rem;
  font-size: .8rem;
  color: white;
  background:rgba(233,59,61,1);
  border-radius:.5rem;
}
._cnt ._bottom{ 
  margin-top: .5rem; 
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.sumPrice,.gift_num,.order-detail{
  margin-right: 1rem;
}
</style>
